<script setup>
/**
 * @/views/service/ServiceTravelPage.vue
 * 描述 ServiceTravelPage 页面
 */

/* 导入 */
import { useRouter } from "vue-router";
import Map from "@/views/home/components/Map.vue";
import { watch, ref } from "vue";
import { useTownStore } from "@/stores";

/* 数据 */
const router = useRouter();
const townStore = useTownStore();
const townName = ref("");

/* 回调 */
// 跳转到 /news 路由的函数
const goTo = (path) => {
  router.push(path);
};

/* 侦听 */
watch(
  () => townStore.currentTown,
  (newTown) => {
    if (newTown) {
      townName.value = newTown.townname;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="service-travel-page">
    <el-card class="page-card" style="width: 100%">
      <template #header>
        <h2>服务-旅游</h2>
      </template>
      <div style="width: 100%; height: 60vh">
        <!-- 地图组件 -->
        <Map :searchKeyword="townName" />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.service-travel-page {
  padding: 20px;
  background-color: #f5f5f5;
}

/* 使得文字居中 */
.service-travel-page {
  text-align: center;
}
</style>
